<template>
  <div class="system-monitor">
    <el-card class="monitor-card">
      <template #header>
        <div class="card-header">
          <span>系统监控</span>
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon cpu">
                <el-icon><Cpu /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-title">CPU使用率</div>
                <div class="stat-value">{{ systemInfo.cpuUsage }}%</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon memory">
                <el-icon><Monitor /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-title">内存使用率</div>
                <div class="stat-value">{{ systemInfo.memoryUsage }}%</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon disk">
                <el-icon><Folder /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-title">磁盘使用率</div>
                <div class="stat-value">{{ systemInfo.diskUsage }}%</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon user">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-title">在线用户数</div>
                <div class="stat-value">{{ systemInfo.onlineUsers }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>系统信息</span>
            </template>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="系统名称">{{ systemInfo.systemName }}</el-descriptions-item>
              <el-descriptions-item label="系统版本">{{ systemInfo.version }}</el-descriptions-item>
              <el-descriptions-item label="运行时间">{{ systemInfo.uptime }}</el-descriptions-item>
              <el-descriptions-item label="服务器时间">{{ systemInfo.serverTime }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card>
            <template #header>
              <span>数据库信息</span>
            </template>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="数据库类型">{{ systemInfo.databaseType }}</el-descriptions-item>
              <el-descriptions-item label="连接数">{{ systemInfo.connections }}</el-descriptions-item>
              <el-descriptions-item label="查询数/秒">{{ systemInfo.queriesPerSecond }}</el-descriptions-item>
              <el-descriptions-item label="慢查询数">{{ systemInfo.slowQueries }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSystemInfo } from '@/api/system'

export default {
  name: 'SystemMonitor',
  setup() {
    const systemInfo = ref({
      cpuUsage: 0,
      memoryUsage: 0,
      diskUsage: 0,
      onlineUsers: 0,
      systemName: 'Zenith Mind',
      version: '1.0.0',
      uptime: '0天0小时0分钟',
      serverTime: '',
      databaseType: 'MySQL',
      connections: 0,
      queriesPerSecond: 0,
      slowQueries: 0
    })

    const refreshData = async () => {
      try {
        // 模拟系统信息获取
        systemInfo.value = {
          cpuUsage: Math.floor(Math.random() * 30) + 10,
          memoryUsage: Math.floor(Math.random() * 40) + 30,
          diskUsage: Math.floor(Math.random() * 20) + 50,
          onlineUsers: Math.floor(Math.random() * 100) + 50,
          systemName: 'Zenith Mind',
          version: '1.0.0',
          uptime: '2天5小时30分钟',
          serverTime: new Date().toLocaleString(),
          databaseType: 'MySQL',
          connections: Math.floor(Math.random() * 50) + 20,
          queriesPerSecond: Math.floor(Math.random() * 100) + 50,
          slowQueries: Math.floor(Math.random() * 5)
        }
        ElMessage.success('数据刷新成功')
      } catch (error) {
        console.error('获取系统信息失败:', error)
        ElMessage.error('获取系统信息失败')
      }
    }

    onMounted(() => {
      refreshData()
    })

    return {
      systemInfo,
      refreshData
    }
  }
}
</script>

<style scoped>
.system-monitor {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-card {
  text-align: center;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.stat-icon {
  font-size: 48px;
  margin-right: 15px;
}

.stat-icon.cpu {
  color: #409eff;
}

.stat-icon.memory {
  color: #67c23a;
}

.stat-icon.disk {
  color: #e6a23c;
}

.stat-icon.user {
  color: #f56c6c;
}

.stat-content {
  text-align: left;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.monitor-card {
  margin-bottom: 20px;
}
</style>